*{
    padding 0
    margin 0
}
a{
    text-decoration none
    color #000
    &:hover{
        color #66b1ff
    }
}
.el-card{
    background-color: unset !important;
    box-sizing: border-box;
}
#mnavh{display: none; margin: 5px 0 0 0; width: 24px; height: 40px;  text-align: center; padding: 0 10px;cursor: pointer;}
    .navicon {
    display: block;
    position: relative;
    width: 30px;
    height: 5px;
    background-color: #000;
    margin-top: 20px;
}
.navicon::before, .navicon::after {
    content: '';
    display: block;
    width: 30px;
    height: 5px;
    position: absolute;
    background: #000;
    -webkit-transition-property: margin, -webkit-transform;
    transition-property: margin, -webkit-transform;
    transition-property: margin, transform;
    transition-property: margin, transform, -webkit-transform;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
}
.navicon::before {
    margin-top: -10px;
}

.navicon::after {

    margin-top: 10px;

}
.open .navicon{background: none;}
.open .navicon:before{ margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.open .navicon:after{ margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.open .navicon:before, .open .navicon:after{ content: ''; display: block; width: 30px; height: 5px; position: absolute; background: #000;}
/*屏幕宽度大于900的时候*/

@media screen and (min-width:900px)
{

}

@media screen and (min-width:600px) and (max-width:900px)
{
    #mnavh{
        overflow: hidden; 
        position: absolute;
        display: block;
        left: 0;
    }
    .header .header-ul{
        display: none !important
    }
    .home,.tags{
        width: 100% !important 
    }
    .home .home-aside{
        display: none;
    }
    .tags .tag-cloud{
        width: 100% !important 
    }
    .article{
        width: 98% !important
    }
    .article .article-info .meta .meta-item-text{
        display: none
    }
    .el-form .form-top{
        flex-direction: column;
    }
    .messages{
        width: 98% !important
    }
    .messages img{
        width: 100%
    }
    .commnets .item .right .right-top .sys, 
    .commnets .item .right .right-top .exe{
        display: none
    }
    .commnets .item .left{
        width: 15% !important
    }
    .commnets .reply .content img{
        width: 22px;
        vertical-align: middle;
        margin-left: 3px;
        margin-right: 3px;
    }
    .footer .footer-main{
        width: 98% !important
    }
    .links{
        width: 98% !important    
    }
    .links .content .el-card{
        margin: 0 5px 10px;
        width: 47%;
    }
    .links .content .el-card .el-card__body{
        padding: 10px;  
    }
    .links .content .el-card a {
        display: block;
        padding: 0 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
    .links .apply-link .el-form {
        width: 94% !important;
    }
    .about{
        width: 98% !important
    }
    .archive{
        width: 100% !important
    }
    .archive .el-main{
        margin-left: 0 !important;
    }
    .archive .el-aside{
        z-index: 99;
        padding: 0 !important;
        margin: 0 !important;
    }
    .archive .el-aside .me-month-list .me-month-item{
        margin-top: 5px !important;
    }
    .header,
    .header .header-ul
    {
        width: 100% !important;
    }
    .header .brand .logo-line-before,
    .header .brand .logo-line-after{
        display:none !important;
    }
    .header .logo-site-title{
        padding: 0 !important;
    }
    .header .brand .site-title .is_show{
        display: inline-block !important;
    }
    .header .header-ul nav.m-hide{
        display:none !important;
    }
    .header .header-ul nav.m-show{
        display: inline-block !important;
        width: 100%;
        height: auto;
        background: rgba(0,0,0,0.5);
        margin-top: 18px;
        position: fixed;
        z-index: 999;
        top: 60px;
        left: 0;
    }
    .header .header-ul nav{
        display: inline-block !important;
        width: 100%;
    }
    .header .header-ul nav .el-menu-item{
        display: block;
        width: 55%;
        background-color: #fff;
    }
    .header .header-ul nav li.el-menu-item.last-li {
        padding-bottom: 100%;
    }
    .category{
        width: 98% !important
    }
    .category .el-row .col-left{
        z-index: 999;
        left: 0;
        top: 70px;
        width: 25% !important;
        background-color: #fff !important;
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .category .el-row .col-left li{
        width: 100%;
        background-color: #fff !important;
    }
    .category .el-row .col-left li.last{
        padding-bottom: 100%;
    }
    .category .el-row .col-right{
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        margin-left: 3% !important;
    }

}

@media screen and (max-width:600px)
{   
    #mnavh{
        overflow: hidden; 
        position: absolute;
        display: block;
        left: 0;
    }
    .header .header-ul{
        display: none !important
    }
    .home,.tags{
        width: 100% !important
    }
    .home .home-aside{
        display: none;
    }
    .tags .tag-cloud{
        width: 100% !important 
    }
    .article{
        width: 98% !important
    }
    .article .article-info .meta .meta-item-text{
        display: none
    }
    .el-form .form-top{
        flex-direction: column;
    }
    .messages{
        width: 98% !important
    }
    .messages img{
        width: 100%
    }
    .commnets .item .right .right-top .sys, 
    .commnets .item .right .right-top .exe{
        display: none
    }
    .commnets .item .left{
        width: 15% !important
    }
    .commnets .reply .content img{
        width: 22px;
        vertical-align: middle;
        margin-left: 3px;
        margin-right: 3px;
    } 
    .footer .footer-main{
        width: 98% !important
    }
    .links{
        width: 98% !important    
    }
    .links .content .el-card{
        margin: 0 5px 10px !important;
        width: 47% !important;
    }
    .links .content .el-card .el-card__body{
        padding: 10px !important;  
    }
    .links .content .el-card a {
        display: block;
        padding: 0 10px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }
    .links .apply-link .el-form {
        width: 94% !important;
    }
    .about{
        width: 98% !important
    }
    .archive{
        width: 100% !important
    }
    .archive .el-main{
        margin-left: 0 !important;
    }
    .archive .el-aside{
        z-index: 99;
        padding: 0 !important;
        margin: 0 !important;
    }
    .archive .el-aside .me-month-list .me-month-item{
        margin-top: 5px !important;
    }
    .header,
    .header .header-ul
    {
        width: 100% !important;
    }
    .header .brand .logo-line-before,
    .header .brand .logo-line-after{
        display:none !important;
    }
    .header .logo-site-title{
        padding: 0 !important;
    }
    .header .brand .site-title .is_show{
        display: inline-block !important;
    }
    .header .header-ul.m-hide{
        display:none !important;
    }
    .header .header-ul.m-show{
        display: inline-block !important;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        position: fixed;
        z-index: 999;
        top: 60px;
        left:0;
    }
    .header .header-ul nav{
        display: inline-block !important;
        width: 100%;
        height:100%;
    }
    .header .header-ul nav .el-menu-item{
        display: block;
        width: 55%;
        background-color: #fff;
    }
    .header .header-ul nav li.el-menu-item.last-li {
        padding-bottom: 100%;
    }
    .category{
        width: 98% !important
    }
    .category .el-row .col-left{
        z-index: 999;
        left: 0;
        top: 70px;
        width: 25% !important;
        background-color:#fff !important;
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .category .el-row .col-left li{
        width: 100%;
        background-color: #fff !important;
    }
    .category .el-row .col-left li.last{
        padding-bottom: 100%;
    }
    .category .el-row .col-right{
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        margin-left: 3% !important;
    }
}